<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" style="width:70%;margin:50px auto">
    <el-tab-pane label="我的预定" name="first" style="text-align:left">
        订单筛选:<el-select v-model="value" placeholder="全部订单" >
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="value1" placeholder="全部日期" >
            <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
        <p>当前共查询到 <span style="color:red">10</span> 条订单,总订单额度 <span style="color:red">515600</span> 元</p>
                <table>
            <tr>
                <th>典礼时间</th>
                <th>主持人</th>
                <th>酒店名称 酒店地址</th>
                <th>下单时间</th>
                <th>金额</th>
                <th>订单状态</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>
                    2018年10月1日<br>
                    上午
                </td>
                <td>
                    张艺谋<br>
                    138123455678
                </td>
                <td>香格里拉</td>
                <td>
                    2018年6月1日<br>
                    13:36
                </td>
                <td>2000</td>
                <td>已主持</td>
                <td></td>
                <td><span style="color:red;cursor:pointer;margin-right:6px;text-decoration:underline">评价或投诉</span></td>
            </tr>
            <tr>
                <td>
                    2018年10月1日<br>
                    上午
                </td>
                <td>
                    张艺谋<br>
                    138123455678
                </td>
                <td>香格里拉</td>
                <td>
                    2018年6月1日<br>
                    13:36
                </td>
                <td>2000</td>
                <td>待主持</td>
                <td></td>
                <td><span style="color:red;cursor:pointer;margin-right:6px;text-decoration:underline">评价或投诉</span></td>
            </tr>
            <tr>
                <td>
                    2018年10月1日<br>
                    上午
                </td>
                <td>
                    张艺谋<br>
                    138123455678
                </td>
                <td>香格里拉</td>
                <td>
                    2018年6月1日<br>
                    13:36
                </td>
                <td>2000</td>
                <td>已删除</td>
                <td></td>
                <td><span style="color:red;cursor:pointer;margin-right:6px;text-decoration:underline"><el-button type="text" @click="dialogVisible = true">查看评价</el-button></span></td>
            </tr>
        </table>
        <el-dialog
        title="评价或投诉"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
            <el-form ref="form" model="form" label-width="80px">
                <el-form-item label="典礼时间">
                    2019/10/01 上午
                </el-form-item>
                <el-form-item label="主持人">
                    白岩松
                </el-form-item>
                <el-form-item label="满意度">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="非常满意" name="type"></el-checkbox>
                        <el-checkbox label="满意" name="type"></el-checkbox>
                        <el-checkbox label="不满意" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="评价">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">提 交</el-button>
            </span>
        </el-dialog>
    </el-tab-pane>
    <el-tab-pane label="个人资料" name="second" style="text-align:left">
        <el-card style="width:500px;height:600px;">
                <h3 style="text-align:center">个人资料</h3>
                <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="公司">
                    tingyu婚礼公司
                </el-form-item>
                <el-form-item label="姓名">
                    白岩松
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password"/>
                    <p style="color:red">*如果不修改密码请留空</p>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
                </el-form>
            </el-card>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  export default {
      name:'PlannerCenter',
    data() {
      return {
            dialogVisible: false,
          form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
          activeName: 'first',
        options: [ {
          value: '选项1',
          label: '待主持'
        }, {
          value: '选项2',
          label: '已主持'
        }, {
          value: '选项3',
          label: '已删除'
        }],
        options1: [{
          value: '选项1',
          label: '2018'
        }, {
          value: '选项2',
          label: '2019'
        }, {
          value: '选项3',
          label: '2020'
        }],
        value: '',
        value1:''
      }
    },methods:{
        onSubmit(){},
        handleClick(){},
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
  
</script>
<style lang="less" scoped>
    table{
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        vertical-align: middle;
    }
    tr{
        width: 100%;
    }
    tr,td,th,table{
        border: 1px solid gray;
        padding: 10px;
        box-sizing: border-box;

    }
</style>